<style>
input{
    background:none;
    outline:none;
    border:0px;
}
.pure-menu a, .pure-menu .pure-menu-heading {
    padding: 5px 24px;
}
</style>


<!--Pool Status start-->
{{ function capitalizeFirstLetter(t){return t.charAt(0).toUpperCase()+t.slice(1)} }}
<div class="home-container">
    <div class="home-wrap">
        <div class="info-row">
            <div class="desktop-100">
                {{ for(var pool in it.stats.pools) { }}
                <div class="info-row">
                    <div class="desktop-33">
                        <div class="info-item">
                            <h3><span class="title homeT1">Current Hashrate</span></h3>
                            <h1><span id="statsHashrate{{=pool}}">{{=it.stats.pools[pool].hashrateString}}</span></h1>
                        </div>
                    </div>
                    <div class="desktop-33">
                        <div class="info-item">
                            <h3><span class="title homeT2">Avg Hashrate</span></h3>
                            <h1><span id="statsHashrateAvg">0.00 KH/s</span></h1>
                        </div>
                    </div>
                    <div class="desktop-33">
                        <div class="info-item">
                            <h3><span class="title homeT3">Miner Number</span></h3>
                            <h1><span id="statsMiners{{=pool}}">{{=it.stats.pools[pool].minerCount}}</span></h1>
                        </div>
                    </div>
                    <div class="desktop-33">
                        <div class="info-item">
                            <h3><span class="title homeT4">Mining Rig Number</span></h3>
                            <h1><span id="statsWorkers{{=pool}}">{{=it.stats.pools[pool].workerCount}}</span></h1>
                        </div>
                    </div>
                    <div class="desktop-33">
                        <div class="info-item">
                            <h3><span class="title homeT5">Network Hashrate</span></h3>
                            <h1><span id="statsNetworkSols{{=pool}}">{{=it.stats.pools[pool].poolStats.networkSolsString}}</span></h1>
                        </div>
                    </div>
                    <div class="desktop-33">
                        <div class="info-item">
                            <h3><span class="title homeT6">Difficulty</span></h3>
                            <h1><span id="statsNetworkDiff{{=pool}}">{{=(parseFloat(it.stats.pools[pool].poolStats.networkDiff)).toFixed(5)}}</span></h1>
                        </div>
                    </div>
                </div>
                {{ } }}
            </div>
        </div>
    </div>
</div>
<!--Pool Status end-->
<div class="page-container">
    <!--The main content start-->
    <div class="info-wrap">
        <div class="info-row">
            <div class="desktop-100">
                <div class="info-row">
                    <!--notice start-->
                    <div class="desktop-100 notice">
                        <img src="../static/notice.png" class="notice-img" alt="">
                        <h1 class="notice-tips first-announcement">
                            As the mining pool is being optimized, there may be inflexible hashrate, unstable payment and mining rig offline. Sorry for the inconvenience！
                        </h1>
                    </div>
                    <!--notice end-->
                    <!--block start-->
                    <div class="desktop-66">
                        <!--Bitcoin nano Blocks Found -->
                        <div class="home-left-part">
                            <div class="home-title">
                                <h2 class="homeT8">Last mined block</h2>
                                <a href="/blocks" class="homeT9">more</a>
                            </div>
                            <div class="home-content">
                                <div class="table-recent-blocks">
                                    <div>
                                        <table class="home-table">
                                            <thead class="home-thead">
                                                <tr class="home-tr">
                                                    <td class="home-td th-block homeT10">Block height</td>
                                                    <td class="home-td th-miner homeT11">Miner</td>
                                                    <td class="home-td homeT12">Time</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                    <div class="overHidden">
                                        <table class="home-table" id="highLight">
                                            <tbody class="home-thead"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Bitcoin nano Blocks Found  end-->
                    <div class="desktop-30">
                        <div class="home-right-part">
                            <div class="hint">
                                <!-- <img src="/static/focus.jpg" alt="" class="" style="width: 280px; height: 142px"> -->
                                <p class="homeT13">
                                    Scan the QR code below to follow the latest news. Ulord secretary Wechat number: Ulord_one
                                </p>
                                <img src="/static/code.png" alt="" class="" style="width: 280px; height: 305px">
                            </div>
                        </div>
                    </div>
                </div>
                <!--block end-->
                <!--tutorial start-->
                <div class="desktop-100">
                    <div class="home-bottom-part">
                        <div class="tutorial-title">
                            <h2 class="homeT14">How to connect to pool</h2>
                        </div>
                        <!--server start-->
                        <div class="tutorial-subtitle">
                            <p class="homeT15">1. Choose your mining server:</p>
                        </div>
                        <div class="home-bottom-table">
                            <div class="table-pool-help">
                                <div class="overHidden">
                                    <table class="home-table">
                                        <tbody>
                                         <tr class="home-tr">
                                             <td class="home-td td-title homeT16">Server</td>
                                             <td class="home-td text-center">121.196.200.110</td>
                                         </tr>
                                         <tr class="home-tr">
                                             <td class="home-td td-title homeT17">Port</td>
                                             <td class="home-td text-center">7200</td>
                                         </tr>
                                          <!-- <tr class="home-tr">
                                               <td class="home-td td-title homeT18">Alt. Stratum Port</td>
                                               <td class="home-td text-center">7200</td>
                                           </tr>-->
                                           <tr class="home-tr">
                                             <td class="home-td td-title homeT19">Username</td>
                                             <td class="home-td text-center homeT21">Your Ulord wallet address, for example: UXWqcUL63ULHQcshc3Yc1QnhZng8KVYayr</td>
                                         </tr>
                                     </tbody>
                                 </table>
                             </div>
                         </div>
                     </div>

                     <!--server end-->
                     <!--software start-->
                     <div class="tutorial-subtitle">
                        <p class="Tutorial-01">2. Mining rig tutorial</p>
                    </div>
                    <div class="tab-content">
                        <ul class="tab-content-switcher">
                            <li class="tab-content-title active">
                                Windows-CPU
                            </li>
                            <li class="tab-content-title">
                                Linux-CPU
                            </li>
                        </ul>
                        <div class="tab-content-container">
                            <div class="tab-content-body tab1">
                                <div class="tools-graphic windows">
                                    <h4 class="title">
                                        <span>1.Ulord Miner</span>&nbsp;&nbsp;<a href="/static/downloads/Ulordrig-win-0.2.0.zip" download="Ulordrig-win-0.2.0.zip" class="Cdownload">点击下载</a>
                                    </h4>
                                    <div class="steps">
                                        <div class="step-row">
                                            <div class="step">
                                                <p class="win-ulord-miner-step1">1.打开Ulord挖矿客户端</p>
                                                <img src="/static/guide/windows-graphic-step1.png">
                                            </div>
                                            <div class="step">
                                                <p class="win-ulord-miner-step2">2.双击悬浮窗弹出挖矿设置界面</p>
                                                <img src="/static/guide/windows-graphic-step2.png">
                                            </div>
                                        </div>
                                        <div class="step-row">
                                            <div class="step">
                                                <p class="win-ulord-miner-step3">3.设置挖矿参数</p>
                                                <img src="/static/guide/windows-graphic-step3.png">
                                            </div>
                                            <div class="step">
                                                <p class="win-ulord-miner-step4">4.点击按钮开始挖矿按钮挖矿</p>
                                                <img src="/static/guide/windows-graphic-step4.png">
                                            </div>
                                        </div>
                                    </div>
                                    <h4 class="title">
                                        <span>2.ulordrig Miner</span>&nbsp;&nbsp;<a href="/static/downloads/win-cli-miner.zip" download="win-cli-miner.zip" class="Cdownload">点击下载</a>
                                    </h4>
                                    <div class="steps">
                                        <div class="step-row">
                                            <div class="step">
                                                <p class="win-ulord-cli-miner-step1">1.解压</p>
                                                <img src="/static/guide/windows-cli-step1.png">
                                            </div>
                                            <div class="step">
                                                <p class="win-ulord-cli-miner-step2">2.打开配置文件</p>
                                                <img src="/static/guide/windows-cli-step2.png">
                                            </div>
                                        </div>
                                        <div class="step-row">
                                            <div class="step">
                                                <p class="win-ulord-cli-miner-step3">3.配置矿池和钱包地址</p>
                                                <img src="/static/guide/windows-cli-step3.png" style="width: 100%;">
                                            </div>
                                            <div class="step">
                                                <p class="win-ulord-cli-miner-step4">4.双击启动挖矿</p>
                                                <img src="/static/guide/windows-cli-step4.png">
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content-body tab2">
                                <h4 class="title">
                                    1. ulordrig
                                </h4>
                                <p class="Tutorial-11">源码编译</p>
                                <ul class="tab-content-snippets">
                                    <li><span class="Tutorial-12">sudo apt install git build-essential cmake libuv1-dev libmicrohttpd-dev openssl libssl-dev</span></li>
                                    <li><span class="Tutorial-13">git clone --depth=1 https://github.com/UlordChain/ulordrig.git && cd ulordrig</span></li>
                                    <li><span class="Tutorial-14">mkdir build && cd build</span></li>
                                    <li><span class="Tutorial-15">cmake .. && make</span></li>
                                </ul>
                                <p >run</p>
                                <ul class="tab-content-snippets">
                                    <li>-o:&nbsp;&nbsp;<span class="Tutorial-12">Set up the pool,  Ulord test chain stratum+tcp://121.196.200.110:7200</span></li>
                                    <li>-O:&nbsp;&nbsp;<span class="Tutorial-13">user: password, Ulord wallet address, password Default fill x</span></li>
                                    <li>-t:&nbsp;&nbsp;<span class="Tutorial-14">Specified number of threads</span></li>
                                    <li>-a:&nbsp;&nbsp;<span class="Tutorial-15">Specified mining algorithm, Ulord uses cryptohello</span></li>
                                </ul>
                                <p>
                                    ./ulordrig -o stratum+tcp://121.196.200.110:7200 -u uU7h4GkR87GQLHVrjDX53PEzEGJBDZ1DLQ.worker1 -p x -t 1
                                </p>
                            </div>
                        </div>
                        
                    </div>

                     
                    </div>
                </div>
                <!--tutorial end-->
            </div>
        </div>
    </div>
    <!--The main content start-->
</div>

<script>
    // window.statsSource = new EventSource("/api/live_stats");
    $(function() {
        statsSource.addEventListener('message', function (e) {
            var stats = JSON.parse(e.data);
            //console.log('stats='+JSON.stringify(stats));
            for (var pool in stats.pools) {
                $('#statsMiners' + pool).text(stats.pools[pool].minerCount);
                $('#statsWorkers' + pool).text(stats.pools[pool].workerCount);
                $('#statsHashrate' + pool).text(stats.pools[pool].hashrateString);
                $('#statsHashrateAvg').text(getReadableHashRateString(calculateAverageHashrate(pool)));
                $('#statsLuckDays' + pool).text(stats.pools[pool].luckDays);
                $('#statsValidBlocks' + pool).text(stats.pools[pool].poolStats.validBlocks);
                $('#statsTotalPaid' + pool).text((parseFloat(stats.pools[pool].poolStats.totalPaid)).toFixed(8));
                $('#statsNetworkBlocks' + pool).text(stats.pools[pool].poolStats.networkBlocks);
                $('#statsNetworkDiff' + pool).text((parseFloat(stats.pools[pool].poolStats.networkDiff)).toFixed(5));
                $('#statsNetworkSols' + pool).text(getReadableNetworkHashRateString(stats.pools[pool].poolStats.networkSols));
                $('#statsNetworkConnections' + pool).text(stats.pools[pool].poolStats.networkConnections);
            }
        });

        function getReadableNetworkHashRateString(hashrate){
           var i = 0;
           var byteUnits = [' H/s', ' KH/s', ' MH/s', ' GH/s', ' TH/s', ' PH/s' ];
           while (hashrate > 1000){
            hashrate = hashrate / 1000;
            i++;
        }
        return hashrate.toFixed(2) + byteUnits[i];
    }

    var groupedByFinder = {};
    var data = [];
    var blockscomb = [];

    for (var i=0; i < blockscomb.length; i++) {
            finder=blockscomb[i][3]; // if other doesn 't already have a property for the current letter
            // create it and assign it to a new empty array
            if (!(finder in groupedByFinder))
                groupedByFinder[finder] = [];

            groupedByFinder[finder].push(blockscomb[i]);
        }

        Object.keys(groupedByFinder).forEach(function(i) {
            var obj = {};
            obj.label = i
            obj.value = groupedByFinder[i].length
            data.push(obj)
        });
        // 表格高亮
        function light() {
            var oTab=document.getElementById('highLight');
            var oldColor='';
            for(var i=0;i<oTab.tBodies[0].rows.length;i++)
            {
                oTab.tBodies[0].rows[i].onmouseover=function ()
                {
                    oldColor=this.style.background;
                    this.style.background='#eeeeee';
                };
                oTab.tBodies[0].rows[i].onmouseout=function ()
                {
                    this.style.background=oldColor;
                };
            }
        };
        light();

        //Datepicker
        function formatDateTime(timeStamp) {
            var date = new Date();
            date.setTime(timeStamp);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            var second = date.getSeconds();
            minute = minute < 10 ? ('0' + minute) : minute;
            second = second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
        };

        var poolData = {{=JSON.stringify(it.stats.pools)}};
        var html = '', html2 = '', comfirms = '';
        for (var pool in poolData ) {
            for (var b in poolData[pool].pending.blocks) {
                var block = poolData[pool].pending.blocks[b].split(":");
               /* if (poolData[pool].pending.confirms) {
                    if (poolData[pool].pending.confirms[block[0]]) {
                        comfirms = '<span style="float:right; color: #339bf4;"><small>' + poolData[pool].pending.confirms[block[0]] + ' of 100</small></span>';
                    } else {
                        comfirms = '<span style="float:right; color: #339bf4;"><small>*PENDING*</small></span>';
                    }
                } else {
                    comfirms = '<span style="float:right; color: #339bf4;"><small>*PENDING*</small></span>';
                }*/
                html += '<tr class="home-tr selected">' +
                '<td class="home-td td-block">' +
                '<a href="http://testnet-explorer.ulord.one/block/'+ block[0] + '" target="_blank">' + block[2] + '</a></td>' +
                '<td class="home-td td-miner"><a href="/miners/'+ block[3].split('.')[0] +'">' + block[3].split('.')[0] + '</a></td>' +
                '<td class="home-td "><span><small>' + formatDateTime(block[4]=='x'?block[5]:block[4]) + '</small></span>' + comfirms + '</td>' +
                '</tr>';

            }

            var x = 0; 
            for(var c in poolData[pool].confirmed.blocks) {
                if (x < 8) {
                    x++;
                    var block2 = poolData[pool].confirmed.blocks[c].split(":");
                    html2 += '<tr class="home-tr selected">' +
                    '<td class="home-td td-block">'+
                    '<a href="http://testnet-explorer.ulord.one/block/'+ block2[0] + '" target="_blank">' + block2[2] + '</a></td>' +
                    '<td class="home-td td-miner"><a href="/miners/'+ block[3].split('.')[0] +'">' + block2[3].split('.')[0] + '</a></td>' +
                    '<td class="home-td "><span><small>' + formatDateTime(block2[4]) + '</small></span>' +
                    '<span style="float:right; padding-left: 18px; color: green;"><small>*PAID*</small></span></td>' +
                    '</tr>'
                    
                }
            }

            $('#highLight tbody').html(html+html2);
        }

        


    });

</script>
<script>
    var poolHashrateData;
    // var poolHashrateChart;

    var statData;
    var poolKeys;

    function buildChartData(){
        var pools = {};

        poolKeys = [];
        for (var i = 0; i < statData.length; i+=10){
            for (var pool in statData[i].pools){
                if (poolKeys.indexOf(pool) === -1)
                    poolKeys.push(pool);
            }
        }

        for (var i = 0; i < statData.length; i+=10) {
            var time = statData[i].time * 1000;
            for (var f = 0; f < poolKeys.length; f++){
                var pName = poolKeys[f];
                var a = pools[pName] = (pools[pName] || {
                    hashrate: []
                });
                if (pName in statData[i].pools){
                    a.hashrate.push([time, statData[i].pools[pName].hashrate]);
                }
                else{
                    a.hashrate.push([time, 0]);
                }
            }
        }

        poolHashrateData = [];
        for (var pool in pools){
            poolHashrateData.push({
                key: pool,
                values: pools[pool].hashrate
            });
           // console.log('avg='+getReadableHashRateString(calculateAverageHashrate(pool)));
           $('#statsHashrateAvg').text(getReadableHashRateString(calculateAverageHashrate(pool)));
       }
   }

   function calculateAverageHashrate(pool) {
    var count = 0;
    var total = 1;
    var avg = 0;
    for (var i = 0; i < poolHashrateData.length; i++) {
        count = 0;
        for (var ii = 0; ii < poolHashrateData[i].values.length; ii++) {
            if (pool == null || poolHashrateData[i].key === pool) {
                count++;
                avg += parseFloat(poolHashrateData[i].values[ii][1]);
            }
        }
        if (count > total)
            total = count;
    }
    avg = avg / total;
    return avg;
}

function getReadableHashRateString(hashrate){
   var i = 0;
   var byteUnits = [' H/s', ' KH/s', ' MH/s', ' GH/s', ' TH/s', ' PH/s' ];
   while (hashrate > 1000){
    hashrate = hashrate / 1000;
    i++;
}
return hashrate.toFixed(2) + byteUnits[i];
}

  

    $.getJSON('/api/pool_stats', function(data){
        statData = data;
        buildChartData();
        // displayCharts();
    });

</script>
<script>
    function Tab(){
        var that = this;
        this.currentIndex = 0;
        this.busy = false;
        this.switchIndex = function(index){
            if(!this.busy&&index!=this.currentIndex){
                this.busy = true;
                $('.tab-content-body').eq(this.currentIndex).hide(0,function(){
                    $(".tab-content-body:eq("+index+")").fadeIn(200,function(){
                        that.busy = false;
                        that.currentIndex = index;
                    })
                })
            }
        }
        //binding Elements
        $('.tab-content-title').click(function(){
            if($(this).index()!==that.currentIndex){
                $('.tab-content-title').removeClass("active");
                $(this).addClass('active');
                that.switchIndex($(this).index());
            }      
        })
    }
    var tab = new Tab();
</script>
